<template>
  <div class="game-container">
    <div class="game">
      <TetrisBoard :board="displayBoard" />
      <div class="game-sidebar">
        <GameInfo
          :score="score"
          :level="level"
          :lines="lines"
          :is-paused="isPaused"
          :difficulty="difficulty"
          @restart="startGame"
          @toggle-pause="togglePause"
          @set-difficulty="setDifficulty"
        />
        <NextPiece :piece="nextPiece" :color="nextColor" />
      </div>
    </div>
    <div v-if="gameOver" class="game-over">
      Game Over!
    </div>
    <div v-if="isPaused" class="paused">
      Paused
    </div>
    <div class="controls">
      <p>Controls:</p>
      <ul>
        <li>A D : Move left/right</li>
        <li>S : Move down</li>
        <li>W : Rotate</li>
        <li>Space : Pause/Resume</li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue';
import TetrisBoard from './components/TetrisBoard.vue';
import GameInfo from './components/GameInfo.vue';
import NextPiece from './components/NextPiece.vue';
import { useTetris } from './composables/useTetris';

const {
  displayBoard,
  nextPiece,
  nextColor,
  score,
  level,
  lines,
  gameOver,
  isPaused,
  difficulty,
  startGame,
  moveLeft,
  moveRight,
  moveDown,
  rotate,
  togglePause,
  setDifficulty
} = useTetris();

const handleKeydown = (event: KeyboardEvent) => {
  if (gameOver.value) return;
  
  switch (event.key.toLowerCase()) {
    case 'a':
      event.preventDefault();
      moveLeft();
      break;
    case 'd':
      event.preventDefault();
      moveRight();
      break;
    case 's':
      event.preventDefault();
      moveDown();
      break;
    case 'w':
      event.preventDefault();
      rotate();
      break;
    case ' ':
      event.preventDefault();
      togglePause();
      break;
  }
};

onMounted(() => {
  window.addEventListener('keydown', handleKeydown);
  startGame();
});

onUnmounted(() => {
  window.removeEventListener('keydown', handleKeydown);
});
</script>

<style>
body {
  margin: 0;
  background: #1a1a1a;
  color: white;
  font-family: Arial, sans-serif;
}

.game-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.game {
  display: flex;
  align-items: flex-start;
}

.game-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.game-over, .paused {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.8);
  padding: 20px 40px;
  border-radius: 8px;
  font-size: 2em;
}

.game-over {
  color: #ff0000;
}

.paused {
  color: #00f0f0;
}

.controls {
  margin-top: 20px;
  background: #222;
  padding: 15px;
  border-radius: 8px;
}

.controls ul {
  list-style: none;
  padding: 0;
}

.controls li {
  margin: 5px 0;
}
</style>